<template>
  <div class="header">
    <ul>
    <div style="margin-left:60px">
        <li v-for="item in navs" class="navs">
        <router-link :to="item.url" class="link">{{ item.title }}</router-link>
      </li>
    </div>
      <div style="margin-right:60px">
        <li v-for="item in navs2" class="navs2">
          <router-link :to="item.url" class="link">{{ item.title }}</router-link>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      navs: [
        { url: "/", title: "首页" },
        { url: "/Zhiwei", title: "职位" },
        { url: "/Gongsi", title: "公司" }
      ],
      navs2: [
        { url: "/Zhaopin", title: "我要招聘" },
        { url: "/Gongzuo", title: "我要找工作" },
        { url: "/Jianli", title: "上传简历" },
      ]
    };
  }
};
</script>

<style scoped>
ul {
  background-color: black;
  height: 50px;
  line-height: 50px;
}
ul li {
  width: 100px;
  background-color: turquoise;
  border-right: 1px solid white;
  float: left;
  list-style: none;
}
.link {
  text-decoration: none;
  color: red;
}
.navs2 {
  float: right;
}
</style>
